<template>
  <div class="page">
    <h3 style="font-weight: bold;font-size: 20px;margin-bottom: 15px;">Welcome</h3>
    <div style="display: flex;justify-content: space-between;margin-bottom: 15px;">
      <div style="background-color: #fff;width: calc(100% / 5 - 30px);border-radius: 15px;border: 1px solid #ddd;padding: 15px;display: flex;align-items: center;">
        <div style="margin-right: 25px;">
          <span style="padding: 15px;background-color: #fedcf2;border-radius: 8px;">
            <i class="el-icon-user" style="color: #ff60c3;"></i>
          </span>
        </div>
        <div>
          <div style="color: #777;font-size: 14px;margin-bottom: 15px;">系统总用户数</div>
          <div style="font-weight: bold;font-size: 20px;">85</div>
        </div>
      </div>
      <div style="background-color: #fff;width: calc(100% / 5 - 30px);border-radius: 15px;border: 1px solid #ddd;padding: 15px;display: flex;align-items: center;">
        <div style="margin-right: 25px;">
          <span style="padding: 15px;background-color: #deddff;border-radius: 8px;">
            <i class="el-icon-s-cooperation" style="color: #6d68ff;"></i>
          </span>
        </div>
        <div>
          <div style="color: #777;font-size: 14px;margin-bottom: 15px;">记忆题库数</div>
          <div style="font-weight: bold;font-size: 20px;">888</div>
        </div>
      </div>
      <div style="background-color: #fff;width: calc(100% / 5 - 30px);border-radius: 15px;border: 1px solid #ddd;padding: 15px;display: flex;align-items: center;">
        <div style="margin-right: 25px;">
          <span style="padding: 15px;background-color: #fef0cc;border-radius: 8px;">
            <i class="el-icon-s-finance" style="color: #ffbb0e;"></i>
          </span>
        </div>
        <div>
          <div style="color: #777;font-size: 14px;margin-bottom: 15px;">关卡题库数</div>
          <div style="font-weight: bold;font-size: 20px;">777</div>
        </div>
      </div>
      <div style="background-color: #fff;width: calc(100% / 5 - 30px);border-radius: 15px;border: 1px solid #ddd;padding: 15px;display: flex;align-items: center;">
        <div style="margin-right: 25px;">
          <span style="padding: 15px;background-color: #fedfd6;border-radius: 8px;">
            <i class="el-icon-s-flag" style="color: #fe7b4f;"></i>
          </span>
        </div>
        <div>
          <div style="color: #777;font-size: 14px;margin-bottom: 15px;">关卡数</div>
          <div style="font-weight: bold;font-size: 20px;">236</div>
        </div>
      </div>
    </div>
    <div style="display: flex;margin-bottom: 15px;">
      <div style="width: calc(70% - 30px);margin-right: 30px;">
        <div style="font-size: 16px;font-weight: 600;margin-bottom: 15px;">班级完成情况</div>
        <div style="width: 100%;height: 30vh;background-color: #fff;border-radius: 8px;border: 1px solid #ddd;">123</div>
      </div>
      <div style="width: 30%;">
        <div style="font-size: 16px;font-weight: 600;margin-bottom: 15px;">完成率</div>
        <div style="width: 100%;height: 30vh;background-color: #fff;border-radius: 8px;border: 1px solid #ddd;">123</div>
      </div>
    </div>
    <div style="display: flex;margin-bottom: 15px;">
      <div style="width: calc(65% - 30px);margin-right: 30px;">
        <div style="font-size: 16px;font-weight: 600;margin-bottom: 15px;">每日一练</div>
        <div style="width: 100%;height: 30vh;background-color: #fff;border-radius: 8px;border: 1px solid #ddd;">123</div>
      </div>
      <div style="width: 35%;">
        <div style="font-size: 16px;font-weight: 600;margin-bottom: 15px;">每月之最</div>
        <div style="width: 100%;height: 30vh;background-color: #fff;border-radius: 8px;border: 1px solid #ddd;">123</div>
      </div>
    </div>
    <div style="display: flex;margin-bottom: 15px;">
      <div style="width: calc(45% - 30px);margin-right: 30px;">
        <div style="font-size: 16px;font-weight: 600;margin-bottom: 15px;">PK之最</div>
        <div style="width: 100%;height: 30vh;background-color: #fff;border-radius: 8px;border: 1px solid #ddd;">123</div>
      </div>
      <div style="width: 55%;">
        <div style="font-size: 16px;font-weight: 600;margin-bottom: 15px;">PK情况</div>
        <div style="width: 100%;height: 30vh;background-color: #fff;border-radius: 8px;border: 1px solid #ddd;">123</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
      }
    },
    methods: {
      initPage() {
      }
    },
    mounted() {
      this.initPage()
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    height: calc(100vh - 105px);
    overflow-y: auto;
    box-sizing: border-box;
    min-width: 1120px;
  }
</style>
